<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页器需求参考</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .paginator {
            width: 800px;
            height: 40px;
            border: 1px solid #333;
            margin: 30px auto;
        }

        .paginator .pagers .current {
            background-color: orange;
        }

        table {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        tbody>tr:nth-child(odd) {
            background-color: pink;
        }

        tbody>tr:nth-child(even) {
            background-color: skyblue;
        }

        tbody>tr:hover {
            background-color: #ccc;
        }

        .paginator .pagers .inactive {
            background-color: #ccc;
        }
    </style>
    <script src="./math_util.js"></script>
    <script src="./student.js"></script>
    <script src="./mytable.js"></script>
    <script src="./paginator.js"></script>
</head>

<body>
    <!-- 分页器 -->
    <div class="paginator"></div>

    <!-- 数据表格 -->
    <div class="mytable"></div>

    <!-- 使用表格 -->
    <script>
        const students = []
        for (let i = 1; i <= 1234; i++) {
            students.push(
                new Student(
                    getLengthedNumStr(i, 4),
                    getRandomName(),
                    getRandom(18, 40),
                    getRandomItem(["男", "女", "基", "同"]),
                    getRandom(2101, 2113),
                    getRandom(5000, 30000),
                )
            )
        }
        console.log("students",students);

        let pageSize = 20
        const mt = new MyTable(
            // 要渲染的数据
            students,

            // 表格往哪里渲染
            document.querySelector(".mytable"),

            // 配置项
            {
                dataAttrDict: {
                    id: "学号",
                    name: "姓名",
                    age: "年龄",
                    gender: "性别",
                    clazz: "班级",
                    salary: "薪水"
                },
                pageSize,
                page: 5
            }
        )

    </script>

    <!-- 使用分页器 -->
    <script>
        const onPageChangeCallback = n => mt.turnToPage(n)

        const pn = new Paginator(
            document.querySelector(".paginator"),
            onPageChangeCallback,
            {
                totalPages: Math.ceil(students.length / pageSize),
                page: 5,
                activePagerClassName: "current",
                inactiveBtnClassName: "inactive"
            }
        )
    </script>

</body>

</html>